<!--语义化-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--  charset="UTF-8"以后中文编码全部是UTF-8 如果不是则会出现乱码  -->
    <meta charset="UTF-8">
    <title>餐饮首页</title>
    <!--  href="../img/logo.jpg"地址  -->
    <!--    地址分为绝对地址和相对地址
    绝对地址：以斜杠开头就是绝对地址，其他都是相对地址
    -->
    <!--    页面里面一般情况下标签都是有开始标签和结束标签-->
    <!--    标签也称为元素 也称为容器-->
    <link rel="icon" href="../img/logo.jpg" type="img/x-ico">
    <link rel="stylesheet" href="../css/home.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/myAjax.js"></script>
    <script src="../js/home.js"></script>

</head>

<style>

    /* css注释 用斜杠加*号  html注释 用<!--    class  -->*/
    /*用class得到当前的容器叫做类选择器*/
    /*.test{*/
    /*    color: red*/
    /*}*/
    /*用id得到的容器叫做id选择器*/
    /*#test-id {*/
    /*    color: blue;*/
    /*}*/
    /*属性选择器*/
    /*div[title]{*/
    /*    color: rebeccapurple;*/
    /*}*/
    /*div[content]{*/
    /*    */
    /*}*/
    /*自定义属性选择器*/
    /*div[aaa]{*/
    /*    color: yellow;*/
    /*}*/
    /*元素选择器*/
    /*div{*/
    /*    color: blue;*/
    /*}*/
    /*  css有一定的优先级  id>class>div      */
    /*    css主要的目的就是写样式，html主要的目的就是容器*/
    /* css一般不要和html写在一个文件里面*/
    /*      oncontextmenu=self.event.returnValue=false*/
</style>
<body>
<!--html的元素 就学一个 div-->
<!--tab键 -->
<!--属性  一般情况下就是元素里面的等号左边的字符, 如果没有等号，那么它自己就是属性
只不过里面的值默认为空""或者为null
如果写的属性没有背景颜色，则是div自带的属性，如果有背景颜色，叫做自定义属性
属性用来干嘛？属性用来描述div
用来装酒？
用来装水？
用来装醋？
如果想让容器有不同的样式？
那么我们可以通过css去定义！
css一般用class选择器
id以后用于js
以后 文字或者图片不能单独存在，外面必须写一个div
最好的方式，每一个图片外面都写一个div
最最好的方式，不要用img，用div加背景图片
-->
<!--<div class="test" id="test-id" title="" content aaa>aaaa</div>-->
<!--<div><a href="https://www.baidu.com/">百度一下</a></div>-->
<!--<div class="aa">ccc</div>-->
<!--<div class="bb">-->
<!--    <div>-->
<!--        <img src="../img/31_mixq.jpg" width="300" height="300">-->
<!--    </div>-->
<!--    <div>-->
<!--        <img class="img" src="../img/31_mixq.jpg" width="300" height="300">-->
<!--        <img src="../img/31_mixq.jpg" width="300" height="300">-->
<!--        <img src="../img/31_mixq.jpg" width="300" height="300">-->
<!--        <img src="../img/31_mixq.jpg" width="300" height="300">-->
<!--    </div>-->
<!--</div>-->
<!--<div class="aa">ccc</div>-->

<!--<img src="../img/31_mixq.jpg" width="300" height="300">-->
<!--<div class="flex">-->
<!--    <div>a</div>-->
<!--    <div>b</div>-->
<!--    <div>c</div>-->
<!--</div>-->
<div>
   <div id="top"></div>
    <!--    下拉菜单  二级标题 多级联动-->
    <!--    <div class="menu">-->
    <!--        <div class="menu-one">-->
    <!--            <div>衣服鞋帽</div>-->
    <!--            <div class="show-one">-->
    <!--                <div>衣服</div>-->
    <!--                <div>鞋帽</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="menu-one">-->
    <!--            <div>衣服鞋帽</div>-->
    <!--            <div class="show-one">-->
    <!--                <div>衣服</div>-->
    <!--                <div>鞋帽</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="menu-one">-->
    <!--            <div>衣服鞋帽</div>-->
    <!--            <div class="show-one">-->
    <!--                <div>衣服</div>-->
    <!--                <div>鞋帽</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--        <div class="menu-one">-->
    <!--            <div>衣服鞋帽</div>-->
    <!--            <div class="show-one">-->
    <!--                <div>衣服</div>-->
    <!--                <div>鞋帽</div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    <div class="middle">
        <div>
            <div class="news">
                <div class="title">较新动态</div>
                <!--                如果一个类里面有多个样式，可以设置多个名字，以空格隔开-->
                <div class="border-top-padding">
                    <!--                    图片-->
                    <div></div>
                    <!--无论标题还是内容，只能显示一行，多余的用...表示  单行溢出
                    如果要做单行溢出，必须设置宽度
                    -->
                    <div class="content" id="news">


                    </div>
                </div>
            </div>
            <div class="product">
                <div class="title">产品展示</div>
                <div class="border-top-padding" id="product">

                </div>
            </div>
        </div>
    </div>
   <div id="foot"></div>
</div>
</body>
</html>